import React, { memo, useEffect, useState } from 'react'
import { NavLink } from 'react-router-dom'
import {Input} from 'antd'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { Modal } from 'lm-react'

import {
    HeaderWrap
} from './style'
import { changeUserInfo } from '@/store/actionCreators'
import { getUserInfo } from '@/api/login/login'
import {SearchOutlined} from '@ant-design/icons'
import {headerLinks} from '@/commom/local-data.js'
import format from '@/components/app-login/format'

import Login from '@/components/app-login/app-login'

export default memo(function AppHeader() {
    //state
    const [isLogin,setIsLogin]  = useState(false)

    // hooks
    const avatarUrl = useSelector(state=>{
        return state.getIn(['userInfo','avatarUrl'])
    },shallowEqual)

    //
    const dispatch = useDispatch()
    useEffect(()=>{
        if(window.localStorage.getItem('Cookie')){
            getUserInfo().then(res=>{
                if(res.code === 200){
                    const userInfo = format(res)
                    dispatch(changeUserInfo(userInfo))
                }
            })
          }
    },[isLogin,dispatch])

    const showSelectItem = (item,index)=>{
        if(index<3){
            return <NavLink to={item.link}  key={item.link}>{ item.title }</NavLink>
        }else{
            return <a href={item.link} target="_blank" rel="noopener noreferrer" key={item.link}>{item.title}</a>
        }
    }
    return (
        <HeaderWrap>
            { isLogin ? <Modal><Login setStatus={setIsLogin}></Login></Modal>:'' }
            <div className='content wrap-v1' >
                <div className='left'>
                    <NavLink to='/#' className='logo sprite_01'></NavLink>
                    <div className="select-list">
                        {headerLinks.map((item,index)=>{
                            return (
                                showSelectItem(item,index) 
                            )
                        })}
                    </div>
                </div>
                <div className="right">
                        <Input className="search" placeholder='音乐/视频/电台/用户' prefix={<SearchOutlined/>}></Input>
                        <a href="https://music.163.com/st/creator" className='bilog' target="_blank" rel="noopener noreferrer">创作者中心</a>
                        {/* <img src="http://p1.music.126.net/KbNJ2VdwcmFEkUwYPghEWg==/109951165178641645.jpg?param=30y30" alt="头像" title='头像' /> */}
                        {/* <div onClick={()=>setIsLogin(true)} >登录</div> */}
                        {
                            avatarUrl ? 
                            <img src={avatarUrl} alt="头像" title='头像' />:
                            <div onClick={()=>setIsLogin(true)} >登录</div>
                        }
                </div>
            </div>
            <div className="divider">

            </div>
        </HeaderWrap>
    )
})

